<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MCAKE蛋糕-网上订购生日蛋糕</title>
    <link rel="stylesheet" href="./css/rester.css">
    <link rel="stylesheet" href="./css/xiangqing.css">
    <link rel="icon" href="http://rhfgn51hx.hn-bkt.clouddn.com/v2-609f59fac9e2a93007e522868276f199_720w.jpg">
    <!-- 放大镜 -->
    <script>
        window.onscroll = function () {
            small = document.getElementById("small");
            shadow = document.getElementById("shadow");
            shadowWH = shadow.style.width ? shadow.style.width : document.defaultView.getComputedStyle(shadow, null).width;
            shadowWH = parseInt(shadowWH);
            smallW = small.style.width ? small.style.width : document.defaultView.getComputedStyle(small, null).width;
            smallW = parseInt(smallW);


            smallMT = small.style.marginTop ? small.style.marginTop : document.defaultView.getComputedStyle(small, null).marginTop;
            smallMT = parseInt(smallMT);
            big = document.getElementById("big");
            bigW = big.style.width ? big.style.width : document.defaultView.getComputedStyle(big, null).width;
            bigW = parseInt(bigW);

            bigImg = big.getElementsByTagName("img")[0];
            move();
        }
        function move() {
            small.onmouseover = function () {
                shadow.style.display = "block";
                big.style.display = "block";
                change(event);
            }
            small.onmouseout = function () {
                shadow.style.display = "none";
                big.style.display = "none";
            }
            small.onmousemove = function () {
                change(event);
            }
        }
        function change(event) {
            var evt = event ? event : window.event;

            var moveL = evt.layerX - shadowWH / 2;
            var moveT = evt.layerY - shadowWH / 2;


            if (moveL < 0) {
                moveL = 0;
            }
            if (moveL > smallW - shadowWH) {
                moveL = smallW - shadowWH;
            }

            if (moveT < 0) {
                moveT = 0;
            }
            if (moveT > smallW - shadowWH) {
                moveT = smallW - shadowWH;
            }

            shadow.style.left = moveL + "px";
            shadow.style.top = moveT + "px";

            big.style.left = 50 + "px";
            big.style.top = smallMT + "px";
            bigImgW = bigImg.offsetWidth;
            //	console.log("bigImgW="+bigImgW);
            var scale = bigImgW / bigW;
            bigImg.style.top = -moveT * scale + "px";
            bigImg.style.left = -moveL * scale + "px";
        }

    </script>
</head>

<body>

    <!-- 头部 -->
    <header>
        <div class="top">
            <div class="center">
                <!-- logo插入区域 -->
                <div class="log">
                    <img src="./images/shouye.image/logo.png" alt="">
                </div>
                <!-- 导航栏 -->
                <ul id="one">
                    <li><a href="javascript:;">上海市</a></li>
                    <li><a href="javascript:;">所有产品</a></li>
                    <li><a href="index.html">首页</a></li>
                    <li><a href="dangao.html">蛋糕</a></li>
                    <li><a href="mianbao.html">面包</a></li>
                    <li><a href="javascript:;">小食</a></li>
                    <li><a href="javascript:;">最新活动</a></li>
                </ul>
                <ul id="two">
                    <li><a href="javescript:;"> <img src="./images/shopping.image/人像.gif"
                                style="width: 20px;height:20px; margin-top: 28px;" alt=""></a>
                    </li>
                    <li>
                        <img src="./images/shouye.image/购物01.png" alt="" id="shopping">
                    </li>
                    <li>
                        <img src="./images/shouye.image/购物02.png" alt="" style="width: 30px;height:20px;" id="tiao">
                    </li>
                </ul>
            </div>
        </div>

    </header>

    <!-- 内容 -->
    <main>
        <!-- 此处是死数据 -->
        <div class="gongju"></div>
        <div class="center">
            <!-- <div id="all">
                <div id="small">
                    <img src="./images/dangao.image/1.jpg" />
                    <div id="shadow"></div>
                    <div id="cover"></div>
                </div>
                <div id="big">
                    <img src="./images/dangao.image/1.jpg" />
                </div>

            </div> -->
        </div>

        <div class=" center">
            <div class="xiangqing">
                <div class="xiangqing-left">
                    <div class="xiangqing-left-top">
                        <p>甜甜草莓</p>
                        <span>Gâteau aux fraises et chocolat</span>
                    </div>

                    <div class="xiangqing-left-center">
                        <div class="xiaomokuai"><span>奶油</span></div>
                        <div class="xiaomokuai"><span>芝士</span></div>
                        <div class="xiaomokuai"><span>巧克力</span></div>
                        <div class="xiaomokuai"><span>水果</span></div>
                    </div>

                    <div class="xiangqing-left-bottom">
                        <p>口味基底 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Whipping Cream</p>
                        <p>口感&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;绵软细腻
                        </p>
                        <p> 口味&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            奶油/巧克力/水果/芝士</p>
                        <p>甜度&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;有亿点甜
                        </p>
                    </div>
                </div>

                <div class="xiangqing-right">
                    <div class="xiangqing-right-top">
                        <div class="xiangqing-right-top-1">
                            <p> 1磅(454g)</p>
                            <span> 适合2-3人食</span>
                        </div>
                        <div class="xiangqing-right-top-1">
                            <p style="color: rgba(128, 128, 128, 0.863);"> 2磅(908g)</p>
                            <span style="color: rgba(128, 128, 128, 0.863);"> 适合4-7人食</span>
                        </div>
                        <div class="xiangqing-right-top-1">
                            <p style="color: rgba(128, 128, 128, 0.863);"> 3磅1.36kg)</p>
                            <span style="color: rgba(128, 128, 128, 0.863);"> 适合8-12人食</span>
                        </div>
                        <div class="xiangqing-right-top-1">
                            <p style="color: rgba(128, 128, 128, 0.863);"> 5磅2.27kg)</p>
                            <span style="color: rgba(128, 128, 128, 0.863);"> 适合12-20人食</span>
                        </div>
                    </div>

                    <div class="xiangqing-right-bottom">
                        <div class="xiangqing-right-bottom-center">
                            <div class="xiangqing-right-bottom-center-left">
                                <p>含十套餐具</p>
                                <p>SIZE：18cm*8cm(直径*高）</p>
                                <span>蛋糕若不及时食用，请放置0-10℃冷藏</span>
                            </div>

                            <div class="xiangqing-right-bottom-center-right">
                                <p>￥288.00元</p>
                                <div class="gou">
                                    <span>立即订购</span>
                                </div>
                                <div class="gou2">
                                    <span>放入购物车</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="center">
            <div class="chatu">
                <img src="./images/xiangqing.image/pc.jpg" alt="">
            </div>
        </div>

    </main>

    <!-- 底部 -->
    <footer>
        <div class="center2">
            <div class="footer-top">

                <div class="footer-top-noe1">
                    <div class="footer-top-noe1-top">
                        <img src="./images/shouye.image/logo2.png" alt="">
                    </div>
                    <div class="footer-top-noe1-bottom">
                        <p>订购热线:4006678678(8:00-2000)</p>
                        <p>客服邮箱:cs@mcake.com</p>
                        <p>地址:上海市普邹陀区同普路1130弄3号楼</p>
                        <p>食品生产许可证:S℃12431010700121</p>
                    </div>

                </div>

                <div class="footer-top-noe2">
                    <div class="ul1">
                        <ul>
                            <li><a href="javascript:;" id="n1">关于我们</a></li>
                            <li><a href="javascript:;">企业介绍</a></li>
                            <li><a href="javascript:;">媒体合作</a></li>
                            <li><a href="javascript:;">招贤纳士</a></li>
                            <li><a href="javascript:;">呼叫中心</a></li>
                        </ul>
                    </div>
                    <div class="ul2">
                        <ul>
                            <li><a href="javascript:;" id="n1">帮助中心</a></li>
                            <li><a href="javascript:;">投诉与建议</a></li>
                            <li><a href="javascript:;">会员权益</a></li>
                            <li><a href="javascript:;">购物指南</a></li>
                            <li><a href="javascript:;">支付类</a></li>
                            <li><a href="javascript:;">订单相关</a></li>
                            <li><a href="javascript:;">配送服务</a></li>
                        </ul>
                    </div>
                    <div class="ul3">
                        <ul>
                            <li><a href="javascript:;" id="n1">发现</a></li>
                            <li><a href="javascript:;">公告</a></li>
                        </ul>
                    </div>
                </div>

                <div class="footer-top-noe3">
                    <div class="niubi">
                        <img src="./images/shouye.image/weibo.png" alt="">
                        <img src="./images/shouye.image/weixin.png" alt="">
                    </div>
                </div>
            </div>

            <div class="footer-bottom">
                <div class="footer-bottom-neihe">
                    <div class="footer-bottom-neihe1">
                        <div class="footer-bottom-neihe1-nb">
                            <p>上海卡法电子商务有限公司</p>
                            <p>地址:上海市普邹陀区同普路1130弄3号楼</p>
                            <p>洽谈电话:021-52691591</p>
                            <p>社会信用代码:913101070678091460</p>
                            <p>食品经营许可证:JY13101070034251</p>
                        </div>
                    </div>
                    <div class="footer-bottom-neihe2">
                        <div class="footer-bottom-neihe1-nb">
                            <p>上海卡法电子商务有限公司北京分公司</p>
                            <p>地止:北京市朝那阳区望京西路甲50号1号楼</p>
                            <p>洽谈电话:010-64720188 </p>
                            <p>社会信用代码:911101053484280752 </p>
                            <p>食品经营许可证:JY11105262932938 </p>
                        </div>
                    </div>
                    <div class="footer-bottom-neihe3">
                        <div class="footer-bottom-neihe1-nb">
                            <p>上海卡法电子商务有限公司杭分公司</p>
                            <p>地址:杭州市拱墅区朝晖路179号嘉汇大厦2号楼25-1室</p>
                            <p>洽谈电话:0571-28103688</p>
                            <p>社会信用代码:913301060920344424</p>
                            <p>食品经营许可证:JY13301050141226</p>
                        </div>
                    </div>
                </div>

            </div>

        </div>
        <div class="nbtz">
            <h4>Copyright©2012-2022上海卡法电子商务有限公司版权所有1沪CP备12022075号1沪公网安备31010702005582号</h4>
        </div>
    </footer>
</body>

</html>
<script src="./js/jquery.min.js"></script>

<!-- 接受商品页发来的数据 -->
<script>
    console.log(location.search.slice(1).split('=')[1]);
    let id = location.search.slice(1).split('=')[1]

    $(function () {
        getData();
    })

    function getData() {
        $.get('http://localhost/MCAKE/php/getGoodsInfo.php', { "goodsId": id }, function (data) {
            console.log(JSON.parse(data));

            let zhenbuchuo = JSON.parse(data);
            // console.log(zhenbuchuo);
            let str = ''
            str += ` <div class="gongju"></div>
        <div class="center" >
            <div id="all">
                <div id="small">
                    <img src="${zhenbuchuo.goodsImg}" />
                    <div id="shadow"></div>
                    <div id="cover"></div>
                </div>
                <div id="big">
                    <img src="${zhenbuchuo.goodsImg}" />
                </div>

            </div>
        </div>


        <div class=" center">
            <div class="xiangqing">
                <div class="xiangqing-left">
                    <div class="xiangqing-left-top">
                        <p>${zhenbuchuo.goodsName}</p>
                        <span>${zhenbuchuo.goodsDesc}</span>
                    </div>

                    <div class="xiangqing-left-center">
                        <div class="xiaomokuai"><span>奶油</span></div>
                        <div class="xiaomokuai"><span>芝士</span></div>
                        <div class="xiaomokuai"><span>巧克力</span></div>
                        <div class="xiaomokuai"><span>水果</span></div>
                    </div>

                    <div class="xiangqing-left-bottom">
                        <p>口味基底 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Whipping Cream</p>
                        <p>口感&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;绵软细腻
                        </p>
                        <p> 口味&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            奶油/巧克力/水果/芝士</p>
                        <p>甜度&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;有亿点甜
                        </p>
                    </div>
                </div>

                <div class="xiangqing-right">
                    <div class="xiangqing-right-top">
                        <div class="xiangqing-right-top-1">
                            <p> 1磅(454g)</p>
                            <span> 适合2-3人食</span>
                        </div>
                        <div class="xiangqing-right-top-1">
                            <p style="color: rgba(128, 128, 128, 0.863);"> 2磅(908g)</p>
                            <span style="color: rgba(128, 128, 128, 0.863);"> 适合4-7人食</span>
                        </div>
                        <div class="xiangqing-right-top-1">
                            <p style="color: rgba(128, 128, 128, 0.863);"> 3磅1.36kg)</p>
                            <span style="color: rgba(128, 128, 128, 0.863);"> 适合8-12人食</span>
                        </div>
                        <div class="xiangqing-right-top-1">
                            <p style="color: rgba(128, 128, 128, 0.863);"> 5磅2.27kg)</p>
                            <span style="color: rgba(128, 128, 128, 0.863);"> 适合12-20人食</span>
                        </div>
                    </div>

                    <div class="xiangqing-right-bottom">
                        <div class="xiangqing-right-bottom-center">
                            <div class="xiangqing-right-bottom-center-left">
                                <p>含十套餐具</p>
                                <p>SIZE：18cm*8cm(直径*高）</p>
                                <span>蛋糕若不及时食用，请放置0-10℃冷藏</span>
                            </div>

                            <div class="xiangqing-right-bottom-center-right">
                                <p>￥${zhenbuchuo.goodsPrice}.00元</p>
                                <div class="gou">
                                    <span>立即订购</span>
                                </div>
                                <div class="gou2" id="sendshopping">
                                    <span>放入购物车</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="center">
            <div class="chatu">
                <img src="./images/xiangqing.image/pc.jpg" alt="">
            </div>
        </div>`

            $('main').html(str)
        })
    }
</script>

<!-- 加入购物车 -->
<script>
    let goodsId = location.search.split('=')[1];
    let username = getCookie("username")
    let obj = {
        vipName: username,
        goodsId: goodsId,
        goodsCount: 1
    };


    $('main').on("click", "#sendshopping", function () {
        $.post('http://localhost/MCAKE/php/addShoppingCart.php', obj,
            function (res) {
                console.log(res);
                if (res.trim() == '1') {
                    alert("添加成功")
                }
            }
        )
    })

</script>

<!-- 点击购物车图标 0.5S 后跳转 -->
<script>
    setTimeout(() => {
        let tiaozhuan = document.querySelector('#shopping')
        tiaozhuan.onclick = function () {
            location.href = 'shoppings.html'
        }
    }, 1000);
</script>